<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>page</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/pageStyle/page.css" />

	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">订单</h1>
		</header>
		<div class="mui-content" id="muiContent">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						全部订单
					</a>
					<a class="mui-control-item" href="#item2mobile">
						待评价（4）
					</a>
					<a class="mui-control-item" href="#item3mobile">
						退款
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);"></div>
				<div class="mui-slider-group" id="groupContent">
					<!--<div v-for="(list,index) in orderList" v-bind="{ id:'order'}" :class="['mui-control-item',{'mui-active':index == 0}]">-->
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-items" v-for="list in ordersList">
										<div class="name_status">
											<img v-bind="{ src:'list.shopList.logo '}" />
											<p class="name">{{ list.shopList.name }}</p>&nbsp;&gt;
											<p class="status">{{ list.orderList.status }}</p>
										</div>
										<div class="lists">
											<p v-for="itemlist in list.orderItemList">{{ itemlist.name }}<span>X{{ itemlist.num }}</span></p>
											<p>...<span>共{{ list.total }}件商品，实付 <b>￥{{ list.orderList.payment }}</b></span></p>
										</div>
										<div class="btn">
											<a>再来一单</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!--</div>-->
					<!--<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-items" v-for="(list,index) in ordersList">
										<div class="name_status">
											<img src="images/qihoo.png" />
											<p class="name">{{ list.shopList.name }}</p>&nbsp;&gt;
											<p class="status">订单已完成</p>
										</div>
										<div class="lists">
											<p>烤蘑菇<span>X2</span></p>
											<p>烤蘑菇<span>X2</span></p>
											<p>烤蘑菇<span>X2</span></p>
											<p>...<span>共8件商品，实付 <b>￥40</b></span></p>
										</div>
										<div class="btn">
											<a>再来一单</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>

					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-items" v-for="(list,index) in ordersList">
										<div class="name_status">
											<img src="images/qihoo.png" />
											<p class="name">{{ list.shopList.name }}</p>&nbsp;&gt;
											<p class="status">订单已完成</p>
										</div>
										<div class="lists">
											<p>烤蘑菇<span>X2</span></p>
											<p>烤蘑菇<span>X2</span></p>
											<p>烤蘑菇<span>X2</span></p>
											<p>...<span>共8件商品，实付 <b>￥40</b></span></p>
										</div>
										<div class="btn">
											<a>再来一单</a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>-->
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/server.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/zepto_1.1.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: '#muiContent',
				data: {
					ordersList: [],
					waitEvaluateList:[],
					cancelList:[]
				},
				mounted: function() {
					this.inits();
					this.getOrderList();
				},
				methods: {
					inits: function() {
						mui.init();
						(function($) {
							//阻尼系数
							var deceleration = mui.os.ios ? 0.003 : 0.0009;
							$('.mui-scroll-wrapper').scroll({
								bounce: false,
								indicators: false, //是否显示滚动条
								deceleration: deceleration
							});

							mui(".mui-table-items").on('tap', '.name_status', function() {
								//业务逻辑
								mui.openWindow({
									url:'detail.html',
									id:'detail.html',
									show:{
										autoShow:true,
										aniShow:'auto'
									},
									waiting: {
										autoShow: true,
										title: '正在加载...'
									}
								})
							})

							$.ready(function() {
								//循环初始化所有下拉刷新，上拉加载。
								$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
									$(pullRefreshEl).pullToRefresh({
										down: {
											callback: function() {
												var self = this;
												setTimeout(function() {
													switch(index) {
														case 0:
															// getData(server + '/order/threeMonthList');
															vm.update(server + '/order/threeMonthList')
															break;
														case 1:
															vm.update(server + '/order/waitEvaluateList')
															break;
														case 2:
															vm.update(server + '/order/cancelList')
															break;
														default:
															alert('GG')
															break;
													}
													self.endPullDownToRefresh();
												}, 1000);
											}
										},
										up: {
											callback: function() {
												var self = this;
												setTimeout(function() {
													// 更新  vm.data
													var ul = self.element.querySelector('.mui-table-view');
													//	ul.appendChild(createFragment(ul, index, 5));
													self.endPullUpToRefresh();
												}, 1000);
											}
										}
									});
								});
							});
						})(mui);
					},
					update: function(serverUrl,dataBox) {
						console.log(serverUrl)
						mui.ajax(serverUrl, {
							type: 'get',
							dataType: 'json',
							success: function(res) {
								console.log(res)
								vm.dataBox = res.rows
							},
							error: function(type) {
								console.log('错误:' + type)
							}
						})
					},
					getOrderList: function() {
						$.ajax({
							url: server + "/order/threeMonthList",
							type: "get",
							dataType: 'json',
							async: true,
							success: function(res) {
								console.log(res)
								vm.ordersList = res.rows;
								console.log(vm.ordersList[0].orderItemList)
							},
							error: function(type) {
								console.log(type)
							}
						});
					}
				}
			})
		</script>
	</body>

</html>